<template>
  <u-popup
    mode="bottom"
    v-model="showPopup"
    :z-index="999"
    border-radius="24"
    safe-area-inset-bottom
    :maskCloseAble="false"
  >
    <view class="popBox">
      <view class="popup-title">
        <view class="let">{{
          $t("common.edit") + $t("newAdmin.goods.title")
        }}</view>

        <i class="iconfont icon-close" @click="showPopup = false"></i>
      </view>

      <view class="inp">
        <textarea class="textarea" v-model="name" maxlength="60" />

        <view class="number"> {{ getValLen }}/60 </view>
      </view>

      <view class="popBtn">
        <u-button
          @click="submit"
          :disabled="disabled"
          :customStyle="{
            background: '#F0250E',
            color: '#fff',
            borderRadius: '32px',
          }"
          >{{ $t("newAdmin.filter.submit") }}</u-button
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      disabled: false,
      name: "",
    };
  },

  computed: {
    getValLen() {
      let len = this.name.length || 0;
      return len < 10 ? `0${len}` : len;
    },
  },

  methods: {
    submit() {
      let { name } = this;
      if (!name) {
        this.$utils.toast("标题不能为空~");
        return;
      }

      this.disabled = true;
      this.Emit.$emit("changeName", name);
    },
  },
};
</script>

<style lang="less" scoped>
.popBox {
  display: flex;
  flex-direction: column;
  padding: 0 0;
}

.popup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rpx 36rpx;

  .let {
    font-size: 32rpx;
    color: #262626;
    font-weight: bold;
  }

  .iconfont {
    color: #262626;
  }
}

.popBtn {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  border-top: 1px solid #f2f2f2;
}

.textarea {
  padding: 24rpx 24rpx 80rpx;
  width: 100%;
  height: 232rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #262626;
}

.inp {
  position: relative;
  padding: 30rpx 36rpx 10rpx;
}

.number {
  position: absolute;
  right: 60rpx;
  bottom: 20rpx;
  font-size: 28rpx;
  color: #8c8c8c;
}
</style>
